<template>
	<div
		:class="[
			'unique-wrapper',
			{ success: valid && status === true },
			{ error: valid && status === false },
		]"
		:style="{ width: width }"
	>
		<fieldset
			:class="['unique-border', { focus: isFocus || input.length }]"
		>
			<legend :style="{ width: labelWidth }"></legend>
			<div class="unique-container">
				<label
					:id="`unique-label-${id}`"
					:class="['placeholder', { focus: isFocus || input.length }]"
					:for="`unique-input-${id}`"
					>{{ placeholder }}</label
				>
				<input
					v-model="input"
					:id="`unique-input-${id}`"
					type="text"
					@blur="onBlur"
					@focus="onFocus"
					@input="onInput"
					:maxlength="maxLength"
				/>
				<label
					v-if="clear && input.length"
					class="clear"
					:for="`unique-input-${id}`"
					@click="clearInput"
				></label>
			</div>
		</fieldset>
		<div v-if="valid && status !== ''" class="unique-tips">
			{{ status ? successInfo : errorInfo }}
		</div>
	</div>
</template>
<script>
import { onMounted, reactive, toRefs } from "vue";
export default {
	props: {
		input: String,
		placeholder: String,
		width: String,
		maxLength: {
			default: 50,
			type: Number,
		},
		successInfo: String,
		errorInfo: String,
		valid: {
			type: Function,
		},
		state: Boolean,
		clear: {
			type: Boolean,
			default: false,
		},
	},
	setup(props, ctx) {
		const state = reactive({
			id: "",
			isFocus: false,
			status: "",
			labelWidth: 0,
			holderWidth: 0,
		});
		const onInput = () => {
			ctx.emit("update:input", props.input);
			if (props.valid) {
				ctx.emit("update:state", props.valid(props.input));
				state.status = props.valid(props.input);
			}
		};
		const onFocus = () => {
			console.log("focus");
			if (!props.input.length) {
				state.labelWidth = state.holderWidth * 0.71 + "px";
			}
			state.isFocus = true;
		};
		const clearInput = () => {
			const inputEl = document.getElementById(`unique-input-${state.id}`);
			inputEl.focus();
			state.isFocus = true;
			ctx.emit("update:input", "");
			if (props.valid) {
				ctx.emit("update:state", props.valid(""));
				state.status = props.valid("");
			}
		};
		const randomId = () => {
			var Num = "";
			for (var i = 0; i < 6; i++) {
				Num += Math.floor(Math.random() * 10);
			}
			state.id = Num;
		};
		const onBlur = () => {
			console.log("blur");
			if (!props.input.length) {
				state.labelWidth = 0;
			}
			state.isFocus = false;
		};
		randomId();
		onMounted(() => {
			state.holderWidth = document
				.getElementById(`unique-label-${state.id}`)
				.getBoundingClientRect().width;
		});
		return {
			clearInput,
			randomId,
			onInput,
			onFocus,
			onBlur,
			...toRefs(state),
		};
	},
};
</script>
<style lang="less" scoped>
.unique-wrapper {
	width: 100%;
	border-radius: 0.1rem;
	font-size: 0.14rem;
	color: #baa38f;
	&.success {
		color: #f5b53f;
	}
	&.error {
		color: #e31a1a;
	}
	.unique-border {
		width: 100%;
		padding: 0 0.2rem;
		border-width: 0;
		border-style: solid;
		border-color: currentColor;
		background-color: #fefaf4;
		transition: border-width 0.5s cubic-bezier(0.25, 0.8, 0.5, 1);
		border-radius: 0.1rem;
		&.focus {
			background-color: white;
			border-width: 0.01rem;
		}
		legend {
			box-sizing: content-box;
			padding-right: 0.02rem;
			transition: width 0.5s cubic-bezier(0.25, 0.8, 0.5, 1);
		}
		.unique-container {
			width: 100%;
			display: flex;
			align-items: center;
			position: relative;
			color: #baa38f;
			.placeholder {
				max-width: 100%;
				white-space: nowrap;
				overflow-x: hidden;
				text-overflow: ellipsis;
				color: currentColor;
				padding-left: 0.02rem;
				line-height: 0.2rem;
				position: absolute;
				left: 0;
				transition-property: all;
				transition-duration: 0.5s;
				transition-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1);
				transition-delay: 0s;
				transform-origin: top left;
				&.focus {
					transform: translateY(-0.2rem) scale(0.71);
				}
			}
			input {
				width: 100%;
				display: block;
				background-color: transparent;
				font-weight: 500;
				color: #1b2559;
				line-height: 0.2rem;
				padding: 0.12rem 0;
				outline: none;
				border: none;
			}
			.clear {
				height: 0.2rem;
				width: 0.2rem;
				background: url(../../assets/images/input_close_icon.png)
					no-repeat center;
				background-size: 0.08rem 0.08rem;
			}
		}
	}
	.unique-tips {
		margin-top: 0.12rem;
		font-size: 0.1rem;
	}
}
</style>